<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Backbone Demo</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>


<script src="assets/js/lib/zepto.js"></script>
<script src="assets/js/lib/underscore.js"></script>
<script src="assets/js/lib/backbone.js"></script>

<script>
(function () {

    window.App = {
        Models: {},
        Views: {},
        Collections: {},
        Events: {},
        Routers: {}
    };

    App.Events = _.extend({}, Backbone.Events);

    App.Views.App = Backbone.View.extend({
        initialize: function () {
            App.Events.on('show:id', this.show, this);
        },

        show: function (id) {
            console.log('the id of show is ' + id);
        }
    });

    App.Routers = Backbone.Router.extend({
        routes: {
            '': 'index',
            'show/:id': 'show'
        },

        index: function () {
            console.log('this is a index page...');
        },

        show: function (id) {
            App.Events.trigger('show:id', id);
        }
    });

    var router = new App.Routers();
    Backbone.history.start();

    var app = new App.Views.App();

})();
</script>

</body>
</html>
